import React from 'react';
import Link from 'next/link';
import Router from 'next/router';
import Jspang from '../components/jspang'

export default () => {

  // Router 的一些钩子事件
  /*
  Router.events.on('routeChangeStart', (...args)=>{
    console.log('routeChangeStart', args)
  })
  Router.events.on('routeChangeComplete', (...args)=>{
    console.log('routeChangeComplete', args)
  })
  Router.events.on('beforeHistoryChange', (...args)=>{
    console.log('beforeHistoryChange', args)
  })
  Router.events.on('routeChangeError', (...args)=>{
    console.log('routeChangeError', args)
  })
  Router.events.on('hashChangeStart', (...args)=>{
    console.log('hashChangeStart', args)
  })
  Router.events.on('hashChangeComplete', (...args)=>{
    console.log('hashChangeComplete', args)
  })
  */

  function gotoA() {
    Router.push('/jspang-a')
  }

  function gotoDetail(id) {
    Router.push({
      pathname: '/detail',
      query: {
        id
      }
    })
  }

  return (
    <>
      <Jspang><h1>首页 Page</h1></Jspang>

      <h2>普通跳转</h2>
      <ul>
        <li><Link href='/jspang-a'><a>去 jspang-a 页面</a></Link></li>
        <li><Link href='/jspang-b'><a>去 jspang-b 页面（Style JSX）</a></Link></li>
        <li><Link href='/time'><a>time</a></Link></li>
        <li><Link href='/head'><a>head</a></Link></li>
        <li><button onClick={gotoA}>去 jspang-a 页面（编程式导航）</button></li>
      </ul>

      <hr/>

      <h2>带参跳转</h2>
      <ul>
        <li><button onClick={()=>{gotoDetail('1')}}>id=1</button></li>
        <li><Link href='/detail?id=2'><a>id=2</a></Link></li>
      </ul>

      <h2>哈希变化</h2>
      <ul>
        <li><Link href="#jspang"><a>哈希变化</a></Link></li>
      </ul>
    </>
  )
}
